<template>
  <h1>Hello Vue3</h1>
  <h2>今年：{{ age }}岁</h2>
  <h3>十年后：{{ newAge }}岁</h3>
  <!-- 使用v-model绑定计算属性 -->
  十年后：<input type="text" v-model="newAge" />
</template>

<script>
import { computed, ref } from 'vue'
/* 
  目标：掌握使用computed函数定义计算属性
  应用场景：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
*/
export default {
  setup() {
    const age = ref(18)
    const newAge = computed({
      get() {
        return age.value + 10
      },
      set(val) {
        age.value = val - 10
      },
    })

    console.log('age', age)
    console.log('newAge', newAge)

    return { age, newAge }
  },
  // Vue2 的写法
  // data() {
  //   return {
  //     age: 18,
  //   }
  // },
  // computed: {
  //   newAge: {
  //     get() {
  //       return this.age + 10
  //     },
  //     set(val) {
  //       // console.log('触发了',val)
  //       this.age = val - 10
  //     },
  //   },
  // },
}
</script>

<style></style>
